<template>
    <Head/>
    <div id="Home">
        <el-container>
            <el-main>
                <el-carousel :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="url in urls" :key="url">
                        <el-image :src="url" fit="contain"></el-image>
                    </el-carousel-item>
                </el-carousel>
                <div id="duel">
                    <el-link href="/#/game" style="font-size: 20px" tagrt="blank">游戏</el-link>
                </div>
            </el-main>
        </el-container>
        <Foot/>
    </div>
</template>

<script>
    import  Head from "@/components/Head";
    import Foot from "@/components/Foot";
    export default {
        name: "Home",
        components: {Foot,Head},
        data() {
            return {
                urls:[
                    require('../assets/maker/maker1.jpg'),
                    require('../assets/maker/maker2.jpg'),
                    require('../assets/maker/maker3.jpg'),
                    require('../assets/maker/maker4.jpg'),
                    require('../assets/maker/maker5.jpg'),
                    require('../assets/maker/maker6.jpg'),
                ]
            }
        },
        methods: {

        }
    }
</script>

<style>
#Home {
    background: white;
    height: 100%;
}
/*.el-carousel__item h3 {*/
/*    color: #475669;*/
/*    font-size: 14px;*/
/*    opacity: 0.75;*/
/*    line-height: 200px;*/
/*    margin: 0;*/
/*}*/

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 200px;
}
</style>
